.monitor-page{
	height: 100%;
	width: 98%;
	margin-left: 1%;
	color:#fff;
	padding-bottom:60px;
	.right-content-wrapper{
		width: 100%;
		
		&::after{
			position: static;
		}
		&:before{
			position: static;
		}
	}
	.monitor-body{
		background: url(../img/compile.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: calc(100% - 17px);
		margin-top: 16px;
		.header-section{
			display: flex;
			height: 36px;
			justify-content: space-between;
			position: relative;
			padding: 6px 10px;
			
			.tools{
				position: absolute;
				right: 0;
				top:-10px;
				li{
					min-width: 60px;
					height: 30px;
					line-height: 30px;
					cursor: pointer;
				}
				
				li.has-icon{
					padding-left: 26px;
					background: url(../img/icon-four.png) left center no-repeat;
					background-size: 18px auto;
					color: rgba(255,255,255,0.5);
				}
				
				li.has-icon.nine{
					padding-left: 26px;
					background: url(../img/nine.png) left center no-repeat;
					background-size: 18px auto;
					color: rgba(255,255,255,0.5);
				}
				
				li.has-icon.fours{
					padding-left: 26px;
					background: url(../img/fours.png) left center no-repeat;
					background-size: 18px auto;
					color: rgba(255,255,255,0.5);
				}
				
				li.has-icon.active{
					color: rgba(255,255,255,1);
					background: url(../img/icon1.png) left center no-repeat;
					background-size: 18px auto;
				}
				
				
				li.has-icon.nine.active{
					color: rgba(255,255,255,1);
					background: url(../img/nines.png)  left center no-repeat;
					background-size: 18px auto;
				}
				
				li.has-icon.fours.active{
					color: rgba(255,255,255,1);
					background: url(../img/foures.png) left center no-repeat;
					background-size: 18px auto;
				}
				
				.opts{
					color: #28B4FF;
					border:1px solid #28B4FF;
					text-align: center;
					padding:0 10px;
				}
				li.has-icon.active{
					color: #FFF;
				}
				li.opts.active{
					background:#1594F0;
					color:#fff;
				}
			}

			.tools.region{
				top:-46px;
			}
		}
		.video-list{
			height: calc(100% - 90px);
			overflow: hidden;
			overflow-y: auto;
			clear: both;
			
			li{
				background: #02090c;
				font-size: 40px;
				font-weight: 300;
				color: rgba(255,255,255,.2);
				font-family: cursive;
				display: flex;
				justify-content: center;
				align-items: center;
				position:relative;

				.video-footer{
					position:absolute;
					bottom:0;
					left: 0;
					width: 100%;
					height: 40px;
					background: rgba(0,0,0,0.7);
					display: flex;
					justify-content: space-between;
					padding:0 16px;
					align-items:center;
				}
				.video-wall{
					font-size: 16px;
					color: #00FCFF;
				}

				span.video-name{
					font-size: 16px;
					cursor: pointer;
					color: #fff;
					background:#28B4FF;
					padding:2px 6px;
				}



			}
		}

		.video-list.video-region{
			height: calc(100% - 130px);
		}
		.rate9{
			li{
				height: 31%;
				width: 32%;
				float: left;
				margin-bottom: 16px;
				margin-left: 1%;
				position: relative;
			}
		}
		.rate4{
			li{
				height: 48.9%;
				width: 49.3%;
				float: left;
				margin-bottom: 10px;
				margin-left: 0.5%;
				position: relative;
			}
		}
		.rate16{
			li{
				height: 23.8%;
				width: 24.4%;
				float: left;
				margin-bottom: 10px;
				margin-left: 0.5%;
				position: relative;
			}
		}
	}
}